<template>
	<view class="pb30">
		
		<view class="con">
			<image mode="widthFix" src="/static/aaa.png" class="image ra20"></image>
			<view class="flex-ju-b mt50">
				<view class="flex-a-i size60 bold">
					lum
					<image mode="widthFix" src="/static/yuyin.png" class="image flex width36"></image>
				</view>
				<image @click="tapadd" mode="widthFix" src="/static/xing.png" class="image width42"></image>
			</view>
			<view class="flex-ju-b mt50 mb30">
				<view @click="tapttype(index)" v-for="(item,index) in ['词根讲解','系列词(45)','词根小说','笔记']">
					<view class="size28 flex-a-i color666" :class="{active:tindex == index}">
						{{item}}
						<image mode="widthFix" src="/static/vip.png" class="image width33"></image>
					</view>
					<view class="height30 flex-ju-c">
						<image mode="widthFix" v-if="tindex == index" src="/static/lian.png" class="image mr33 width23"></image>
					</view>
				</view>
			</view>
			<view id="section0">
				<mp-html :content="info" />
			</view>
			<view id="section1" class="flex-ju-b mt30">
				<view class="size32 bold">系列词(45)</view>
				<view class="flex-a-i">
					<image mode="widthFix" src="/static/san.png" class="image  width46"></image>
					<image mode="widthFix" src="/static/hange.png" class="image ml20 width46"></image>
				</view>
			</view>
			<!-- <swiper @change="swchange" previous-margin="100rpx" next-margin="100rpx" class="swiper height650 ">
				<swiper-item v-for="(item,h) in 3" :key="h">
					<view class="flex-ju-c mt20 transition" :class="{scale:sindex==h}">
						<view style="box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.1);" class="pg15  wh450-580 ra28">
							<view class="flex-ju-c">
								<image class="wh440-440 ra20" src="/static/aaa.png"></image>
							</view>
							<view class="size40 bold mt20 mb10">luminous</view>
							<view class=" one size28 width460">
								<text class="color666">adj.</text>
								<text>发光的；夜光的；发亮的；鲜艳的；鲜亮的</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper> -->
			
			<!-- <view style="box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.1);" class="flex-ju-b  pg25-20 ra28">
				<view class="flex-a-i">
					<view>
						<image  src="/static/aaa.png" class="image wh80-80 ra15"></image>
					</view>
					<view class="ml15">
						<view class="size32 bold">luminous</view>
						<view class="flex-a-i size24  flex-wrap">
							<view class="flex-a-i bgF9F9F9 mt5 pg2-20 ra30 mr20">CET6</view>
						
						</view>
					</view>
				</view>
				<view class="flex-a-i">
					<view class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
						<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
					</view>
					<view class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
						<image mode="widthFix" src="/static/xing.png" class="image width28"></image>
					</view>
				</view>
			</view> -->
			
			<view @click="navto('detailed')" v-for="(item,p) in 2" class="border-tECEDEE mt30 pt30 flex-ju-b">
				<view >
					<view class="size32 bold">luminous</view>
					<view class="flex-a-i size24  flex-wrap">
						<view class="flex-a-i bgF9F9F9 mt20 pg2-20 ra30 mr20">CET6</view>
					
					</view>
				</view>
				<view class="flex-a-i">
					<view class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
						<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
					</view>
					<view class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
						<image mode="widthFix" src="/static/xing.png" class="image width28"></image>
					</view>
				</view>
			</view>
			 
			 
			 <view id="section2" class="flex-ju-b mt50">
			 	<view class="size32 bold">词根小说</view>
			 </view>
			 <view class="mt15">
				 The Stargazer's Epiphany The luminous moon illuminated the astronomer’s notes. She recorded Vega’s luminosity, her telescope fixed on the celestial luminary. Suddenly, cosmic rays flared—a revelation blazed across the night. The universe whispered its secrets in light.
			 </view>
			<view class="flex-a-i mt30">
				<image mode="widthFix" src="/static/aiyuyin.png" class="image width54"></image>
				<view class="colorFD2F55 size24 bgFFEAED flex-ju-c wh138-54 ra16 ml20">重新生成</view>
				<view class=" border898D92 ra10 size24 wh158-52 flex-ju-c ml20">
					写作风格
					<image mode="widthFix" src="/static/bottoms.png" class="image width22 ml5"></image>
				</view>
			</view>
			
			<view id="section3" class="flex-ju-b mt50">
				<view  class="size32 bold">笔记</view>
			</view>
			
			<view  class="bgFFF2F4 pg25-20 ra20 mt30">
				<view class="flex-ju-b border-bECEDEE pb30">
					<view class="size28 bold">我的笔记</view>
					<view class="flex-a-i size24 ra10 pg1-15" style="background: rgba(19,28,37,0.08);">
						<uni-icons size="20" type="camera"></uni-icons>图片
					</view>
				</view>
				<view class="posire">
					<textarea class="size28 pt20 pb50 width1000" auto-height maxlength="-1"  placeholder="在这里写下你的笔记" placeholder-style="color:#898D92"></textarea>
					<image mode="widthFix" src="/static/jiao.png" class="image width44 right-20 bottom-25 posiab"></image>
					<view class="flex-a-i flex-wrap">
						<view class="posire width200 mr20">
							<image  src="/static/aaa.png" class="image wh200-200 ra20"></image>
							<view class="wh42-42 ra42 flex-ju-c posiab top10 right10" style="background: rgba(19,28,37,0.5);">
								<uni-icons color="#fff" type="closeempty"></uni-icons>
							</view>
						</view>
						<view class="posire width200 mr20">
							<image  src="/static/aaa.png" class="image wh200-200 ra20"></image>
							<view class="wh42-42 ra42 flex-ju-c posiab top10 right10" style="background: rgba(19,28,37,0.5);">
								<uni-icons color="#fff" type="closeempty"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				
			
			</view>
			
			<view class="flex-a-i mt50">
				<view class="size32 bold">精选笔记</view>
				<image mode="widthFix" src="/static/vip.png" class="image width44"></image>
			</view>
			
			<view class="mt30">
				<view class="flex-ju-b size24 color666 ">
					<view class="flex-a-i">
						<image src="/static/aaa.png" class="image wh32-32 mr10 flex ra32"></image>
						用户昵称
					</view>
					<image src="/static/xing.png" mode="widthFix" class="image width28"></image>
				</view>
				<view class="size28 pl10 mt20 fith two" style="border-left:5rpx solid #FFF2F4;">
					The Stargazer's Epiphany.The luminous moon illuminated the astronomer’s notes. She recorded Vega’s luminosity, her （观星者的顿悟发光的月亮照亮了天文学家的笔记。她记录着织女星的亮度，望远镜对准这颗天体巨星。突然，宇宙射线迸发——一道启示划破夜空。宇宙以光芒轻诉其奥秘。）
				</view>
				<view class="flex-ju-b">
					<view></view>
					<view class="colorFD2F55 size24 mt5">展开</view>
				</view>
			</view>
			
			<view class="flex-ju-b mt50">
				<view class="flex1 flex-ju-c height100 ra20 colorfff bgFD2F55 mr10">上一个</view>
				<view class="flex1 flex-ju-c height100 ra20 colorfff bg000 ml10">下一个</view>
			</view>
		</view> 
		
		<add ref="add"></add>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lindex:-1,
				sindex:0,
				tindex:0,
				pindex:0,
				info:'<p><img src="http://hbox4.wexiang.vip/assets/denglu-BYELjtyR.png" /></p>'
			}
		},
		mounted() {
			
		},
		methods: {
			tappindex(index){
				this.pindex = index
			},
			taplist(index){
				this.lindex = index
			},
			tapttype(index){
				this.tindex = index
				if(index==1){
					
				}else if(index == 2){
					
				}else if(index == 3){
					
				}else{
					
				}
				this.scrollToSection1(index)
			},
			swchange(e){
				this.sindex=e.detail.current
			},
			scrollToSection1(index) {
			      uni.pageScrollTo({
					duration:100,
			        selector: '#section'+index // 目标元素ID
			      });
			},
			tapadd(){
				this.$refs.add.open(1)
			}
		}
	}
</script>

<style>
	.lactive{
		border:1px solid #FD2F55;
	}
	.fith{
		-webkit-line-clamp: 5;
	}
	.transition{
		transition: all 0.5s;
		transform: scale(0.8);
	}
	.scale{
		transform: scale(1);
	}
	
.active{
	color: #000;
	font-weight: bold;
}
.cactive{
	background: #fff;
}
</style>
